
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM操作图片</title>
    <style type="text/css">
        html,div,ul,li {margin: 0px;padding: 0px;}
        a{cursor: pointer;}
        li {list-style: none;cursor: pointer;}
        fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
        #cont_left {width: 300px;height: 500px;float: left;}
        #cont_right {float: left;}
        .newcss1{background-color: yellowgreen;}
    </style>
</head>
<body>
<div id="cont_left" class="main">
    <ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
        <ul id="menu1">
            <li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
            <li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
        </ul>
    </ul>

    <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
        <ul id="menu2">
            <li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
            <li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
            <li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
            <li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
        </ul>
    </ul>

    <ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
        <ul id="menu3">
            <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
            <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
        </ul>
    </ul>

</div>
<fieldset>
    <legend>原始图片</legend>
    <img id="fruit" src="img/fruit.jpg">
</fieldset>
<fieldset>
    <legend>图片路径</legend>
    <p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
    <legend>选择你喜欢的水果</legend>
    <ul style="text-align: left;">
        <li>
            <input name="enjoy" type="checkbox" value="苹果" />苹果
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="葡萄" />葡萄
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="西瓜" />西瓜
        </li>
    </ul>
    <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
    <legend>创建图片</legend>
    <div id="msg3"></div>
</fieldset>
<fieldset>
    <legend>克隆图片</legend>
    <div id="msg4"></div>
</fieldset>
<script>

    function show(title) {
        var sub_menu = document.getElementById(title);
        var dis_v = sub_menu.style.display;

        if(dis_v == "none")
            sub_menu.style.display = "block";
        else
            sub_menu.style.display = "none";
    }

        function showImg() {
        var oTab = document.getElementById("fruit");
        document.getElementById("msg1").innerHTML = oTab.getAttribute("src");
    }

    function getFruit() {
        var a = document.getElementsByName('enjoy');

        document.getElementById('msg2').innerHTML = "你最喜欢的水果是：";

        for(var i=0;i<=a.length;i++){
            if(a[i].checked == true){
                document.getElementById('msg2').innerHTML += a[i].value+" " ;
            }
        }
    }


    function createImg() {
        var msg3 = document.getElementById('msg3');
        var im = document.createElement('img');
        im.src = "img/grape.jpg";
        msg3.appendChild(im);
    }


    function cloneImg() {
        var msg4 = document.getElementById('msg4');
        var cloneim = document.getElementById('fruit');
        msg4.appendChild(cloneim.cloneNode());
    }


    function changeImg() {
        var msg5 = document.getElementById('fruit');
        msg5.src = "img/grape.jpg";
    }




    function removeImg() {
        var msg6 = document.getElementById('fruit');
        msg6.parentNode.removeChild(msg6);
    }


    function changeCss1(){
        var ele = document.getElementById('fruit');
        ele.style.border = 'solid 4px red';
    }

    function changeCss2() {
        var ele = document.getElementsByTagName('fieldset');
        for (var i = 0; i < ele.length; i++) {
            ele[i].style.backgroundColor = "green";
        }
    }
</script>
</body>
</html>